<template>
  <div v-for="(item, index) in element.list" :key="item.guid" class="cp-item" :id="item.guid">
    <template v-if="item.component.type == 'group'">
      <div class="cp-group">
        <el-row class="cp-group-hd" type="flex" justify="space-between">
          <div class="cp-group-name">
            <el-input v-model="item.config.name" style="width:100px"></el-input>
          </div>
          <div class="cp-group-icon" @click="() => item.toggle()">
            <el-button>
              {{ item.config.expand == 0 ? '展开' : '收起' }}
            </el-button>
          </div>
        </el-row>
        <div class="cp-group-childs" v-if="item.config.expand == 1">
          <elem-list :element="item"></elem-list>
        </div>
      </div>
      <el-form style="margin-top:10px;">
        <el-form-item label="布局">
          <el-radio-group v-model="item.config.type" @change="() => item.update()">
            <el-radio :value="0">自由</el-radio>
            <el-radio :value="1">流式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="操作">
          <el-space wrap>
            <el-button @click="() => item.remove()">删除</el-button>
            <el-button @click="() => item.moveUp()">上</el-button>
            <el-button @click="() => item.moveDown()">下</el-button>
            <el-button @click="() => item.resetScale()">重置</el-button>
            <el-button @click="() => item.select()">选中</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <div class="cp-item">
        <elem-one :item="item">
          <el-form-item label="操作">
            <el-space wrap>
              <el-button @click="() => element.del(item)">删除</el-button>
              <el-button @click="() => element.move(item, -1)">上</el-button>
              <el-button @click="() => element.move(item, 1)">下</el-button>
              <el-button @click="() => element.moveBottom(item)">底</el-button>
              <el-button @click="() => element.moveTop(item)">顶</el-button>
              <el-button @click="() => item.resetScale()">变换重置</el-button>
              <!--el-button @click="() => item.up()">顶</el-button-->
              <el-select placeholder="选组" style="width:80px;margin-left:10px;" @change="(e) => item.moveToOther(e)">
                <el-option :value="item.guid" :label="index" v-for="(item, index) in groups">{{ item.config.name }}</el-option>
                <el-option :value="0">分离组</el-option>
              </el-select>
              <el-button @click="() => item.select()" v-if="element.component.type != 'group'">选中</el-button>
            </el-space>
          </el-form-item>
        </elem-one>
      </div>
    </template>
  </div>
</template>
<script>
import elemOne from './ElemOne.vue'
import ElemList from './ElemList.vue'
export default {
  props: ['element'],
  components: {
    elemOne,
    ElemList
  },
  data() {
    return {}
  },
  computed: {
    groups() {
      let root = this.element.getRoot()
      return root.list.filter((res) => res.component.type == 'group' && res.guid != this.element.guid)
    }
  },
  methods: {},
  mounted() {
    console.log(this.element.list.length)
  }
}
</script>
